@import "./FormComponents.css";
@import "./InputIcon.css";
@import "./Input.css";

:host([icon]) {
	min-width: var(--_ui5_button_base_min_width);
	width: var(--_ui5_button_base_min_width);
}

:host([icon]) .ui5-select-root {
	min-width: var(--_ui5_button_base_min_width);
}

:host([icon]) .ui5-select-label-root {
	min-width: 0;
	padding-inline-start: 0;
}

.ui5-select-root {
	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
	width: 100%;
	height: 100%;
	display: flex;
	outline: none;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--_ui5_input_border_radius);
}

.ui5-select-label-root {
	flex-shrink: 1;
	flex-grow: 1;
	align-self: center;
	min-width: 1rem;
	padding-inline-start: 0.5rem;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--_ui5_select_label_color);
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	font-weight: normal;
}

.ui5-select-option-icon {
	padding-inline-start: 0.5rem;
	color: var(--sapField_TextColor);
	align-self: center;
}

:host(:not([disabled])) {
	cursor: pointer;
}

.ui5-select-icon-root {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: var(--_ui5_select_icon_width);
	min-width: var(--_ui5_select_icon_width);
	height: var(--_ui5_select_icon_wrapper_height);
	padding: 0;
}

.ui5-select-icon {
	color: inherit;
}

:host([value-state]:not([value-state="None"], [value-state="Positive"])) .ui5-select-icon-root {
	height: var(--_ui5_select_icon_wrapper_state_height);
}
